import React, {Component} from 'react';
import {PageContainer} from "@ant-design/pro-components";
import {message, Modal, Space, Table, Tag, Text, Typography} from 'antd';
import type {ColumnsType} from 'antd/lib/table';
import {Button} from 'antd';
import {Link} from "umi";
import {request} from "umi";
import {getUserInfo, MergeMenu, ShowError} from "@/utils/format";
import {FillProgress, QuerySubMenus} from "@/services/School/SchoolMenuApi";
import {ServerMessages} from "@/services/ServerMessages";
import {CloseFillCircleApi, FillCircleApi, OpenFillCircleApi} from "@/services/Province/Dashboard";
import {ExclamationCircleFilled, ExclamationCircleOutlined} from "@ant-design/icons";

// const confirm  = Modal.confirm;
//
// const showOpenConfirm = (id, name) => {
//   return confirm({
//     title: '确认开始填报"'+name+'"?',
//     icon: <ExclamationCircleOutlined />,
//     content: '开始填报后，视为本轮填报周期开始。',
//     onOk() {
//       console.log('OK');
//       OpenFillCircleApi({id: id}).then(res => {
//         if (res.status === 0) {
//           message.success(res.message)
//         } else {
//           ShowError(res.message)
//         }
//       }, () => {
//         ShowError(ServerMessages.error_message)
//       })
//     },
//     onCancel() {
//       console.log('Cancel');
//     },
//   });
// };
//
// const showCloseConfirm = (id, name) => {
//   return confirm({
//     title: '确认关闭填报"'+name+'"?',
//     icon: <ExclamationCircleOutlined />,
//     content: '关闭填报后，视为本轮填报周期关闭。',
//     onOk() {
//       console.log('OK');
//       CloseFillCircleApi({id: id}).then(res => {
//         if (res.status === 0) {
//           message.success(res.message)
//         } else {
//           ShowError(res.message)
//         }
//       }, () => {
//         ShowError(ServerMessages.error_message)
//       })
//     },
//     onCancel() {
//       console.log('Cancel');
//     },
//   });
// };


class GraduateEmployment extends Component {
  state = {
    loading: true,
    data: []
  }

  confirm = Modal.confirm

  showCloseConfirm = (id, name) => {
    const that = this
    return this.confirm({
      title: '确认关闭填报"'+name+'"?',
      icon: <ExclamationCircleOutlined />,
      content: '关闭填报后，视为本轮填报周期关闭。',
      onOk() {
        console.log('OK');
        CloseFillCircleApi({id: id}).then(res => {
          if (res.status === 0) {
            message.success(res.message)
            console.log(that.state.data)
            for (let i = 0; i < that.state.data.length; i++) {
              if (that.state.data[i].key === id) {
                that.state.data[i].flag = that.state.data[i].flag === 1 ? 0 : 1
                that.setState({data: that.state.data})
                break
              }
            }
          } else {
            ShowError(res.message)
          }
        }, () => {
          ShowError(ServerMessages.error_message)
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  showOpenConfirm = (id, name) => {
    const that = this
    return this.confirm({
      title: '确认开始填报"'+name+'"?',
      icon: <ExclamationCircleOutlined />,
      content: '开始填报后，视为本轮填报周期开始。',
      onOk() {
        console.log('OK');
        OpenFillCircleApi({id: id}).then(res => {
          if (res.status === 0) {
            message.success(res.message)
            console.log(that.state.data)
            for (let i = 0; i < that.state.data.length; i++) {
              if (that.state.data[i].key === id) {
                that.state.data[i].flag = that.state.data[i].flag === 1 ? 0 : 1
                that.setState({data: that.state.data})
                break
              }
            }
          } else {
            ShowError(res.message)
          }
        }, () => {
          ShowError(ServerMessages.error_message)
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  componentDidMount() {

    // let data = [
    //   {
    //     key: '2_3_1',
    //     name: '年度授予学士、硕士、博士学位情况',
    //     circle: '一年一次',
    //     target: '学科填报',
    //     flag: 1,
    //     to: '/cultivate-talents/graduate-employment/degree-counts',
    //   },
    //   {
    //     key: '2_3_2',
    //     name: '学科领域突出贡献者情况',
    //     circle: '一年一次',
    //     target: '学科填报',
    //     flag: 1,
    //     to: '/cultivate-talents/graduate-employment/discipline-pioneer',
    //   },
    // ]
    // 将 response 的 flag 映射到 data 的 flag 上
    // this.setState({loading: false, data})

    // QuerySubMenus('2_3').then(response => {
    //   console.log("@返回数据", response)
    //   data = MergeMenu(data, response)
    //   this.setState({loading: false, data})
    // }, () => {
    //   ShowError(ServerMessages.error_message)
    // })

    FillCircleApi().then(response => {
      console.log("@返回值", response)
      //   console.log("@返回数据", response)
      let data = []
      for (let i = 0; i < response.data.length; i++) {
        data.push({
          key: response.data[i].id,
          name: response.data[i].fill_about,
          flag: response.data[i].flag,
          circle: response.data[i].circle,
          time: response.data[i].time,
        })
      }
      console.log("@data", data)
      this.setState({loading: false, data: data})
    }, () => {
      ShowError(ServerMessages.error_message)
      this.setState({loading: false})
    })

  }

  render() {

    const columns = [
      {
        title: '监测点',
        dataIndex: 'name',
        key: 'name',
        render: text => <b>{text}</b>,
      },
      {
        title: '填报周期',
        dataIndex: 'circle',
        key: 'circle',
        render: text => <b>{text}</b>,
      },
      {
        title: '上次操作时间',
        dataIndex: 'time',
        key: 'time',
        render: text => <b>{text}</b>,
      },
      // {
      //   title: 'id',
      //   dataIndex: 'key',
      //   key: 'key',
      //   render: text => <b>{text}</b>,
      // },
      {
        title: '操作',
        key: 'action',
        render: (_, record) => (
          <Space size="middle">
            {record.flag === 0 && (
              <>
                <Button type="primary" onClick={() => {this.showOpenConfirm(record.key, record.name)}}>开启</Button>
                <Button type="primary" disabled>关闭</Button>
              </>
            )}
            {record.flag === 1 && (
              <>
                <Button type="primary" disabled>开启</Button>
                <Button type="primary" onClick={() => {this.showCloseConfirm(record.key, record.name)}}>关闭</Button>
              </>
            )}
          </Space>
        ),
      },
    ];

    return (
      <PageContainer
        header={{
        title: '学科填报管理',
        breadcrumb: {},
      }}
      >
        <Table loading={this.state.loading} columns={columns} dataSource={this.state.data}
               pagination={{pageSize: 100}}/>
      </PageContainer>
    );
  }
}

export default GraduateEmployment;
